import styled from 'styled-components'
import style,{ px2rem } from "@/assets/global-style";

export const RecommendWrapper = styled.div`
    .list {
        margin:${px2rem(8)};
        column-count:2;
        .div {
            background-color:#fff;
            break-inside:avoid;
            margin-bottom:.625rem;
            text-align:left;
            /* padding:0 .3125rem; */
            border-radius:.3125rem;
            position:relative;
            .img {
                width:100%;
                border-radius:.3125rem;
            }
            .title{
                width:95%;
                overflow:hidden;
                text-overflow:ellipsis;
                -webkit-line-clamp:2;
                display:-webkit-box;
                line-clamp:2;
                -webkit-box-orient:vertical;
                color:black;
                font-size:${px2rem(14)};
                font-weight:700;
                margin: ${px2rem(5)} 0;
                padding-left:${px2rem(5)};
                margin-bottom:${px2rem(5)};
            }
            .list_footer{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin: ${px2rem(5)} 0;
                .author{
                    padding-left:${px2rem(5)};
                    display: flex;
                    flex-direction: row;
                    vertical-align:middle;
                    .coupon{
                        display: inline-block;
                        font-size: ${style["font-size-s"]};
                        vertical-align:baseline;
                        color: ${style["i-color-banner"]};
                        /* justify-content: start; */
                    }
                    .auimg{
                        display: inline-block;
                        height:${px2rem(15)};
                        width:${px2rem(15)};
                        border-radius:50%;
                        vertical-align:middle;
                    }
                }
            }
            
            
            .price {
                /* padding-left:.5rem; */
                font-size:${style["font-size-s"]};
                /* color:#f23562; */
                color: ${style["i-color-banner"]};
                font-weight:bold;
            }
            .cart-icon {
                position:absolute;
                bottom:-7px;
                right:15px;
                font-size:20px;
            }
        }
        
    }
`